import React from 'react'
import { Modal, Button, Form, Input, Select, Row, Col, InputNumber, message } from 'antd'
import { LwjArea }  from 'components'
import LwjUpload from 'components/LwjUpload/LwjUpload'
import {
  balanceChangeType,
  balanceChangeReason
} from 'utils/enumConfig'

const FormItem = Form.Item
const Option = Select.Option

const FormModal = ({
                     onOk,
                     item,
                     form: {
                       getFieldDecorator,
                       validateFields,
                       setFieldsValue,
                       getFieldValue,
                       resetFields
                     },
                     dispatch,
                     distributorItem,
                     contractNumVisible,
                     ...createModalProps
                   }) => {
  const formItemLayout = {
    labelCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
    wrapperCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
  }

  const onSubmit = (e) => {
    e.preventDefault()
    validateFields((err, values) => {
      if (!err) {
        onOk(values)
      }
    })
  }

  const modalOpts = {
    ...createModalProps,
    onOk: onSubmit,
  }

  const xlsProps = {
    target: '/services/upload/order',
    uploadIcon: 'upload',
    fileType: '',
    onChange (value) {
    },
    showUploadList: true
  }

  /**
   * 变更类型的Option拼装
   * @returns {Array}
   */
  const optionBuilder = (type) => {
    let option = []
    Object.keys(type).forEach((key) => {option.push(<Option key={key} value={key}>{type[key]}</Option>)})

    return option
  }

  const voucherHandler = () => {
    switch (item.reason) {
      case 'MORE_RECEIVING_REFUND':
        return '收款单'
      case 'WITHDRAW_DEPOSIT':
        return '支付凭证号'
      default:
        return '合同号'
    }
  }

  /** @namespace item.contractChangeType */
  /** @namespace item.contractChangeBusinessType */
  /** @namespace contractItem.consigneeAddress */
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row>
          <Col span={12}>
            <FormItem {...formItemLayout} hasFeedback label="选择门店">
              {! ('id' in item) && <Button
                icon="plus"
                type="primary"
                onClick={() => {
                  dispatch({
                    type: 'balanceChangeApply/openDistributorModal',
                    payload: {}
                  })
                }}
              >
              </Button>}
              {item.distributorId && item.distributorName}
            </FormItem>

            <FormItem {...formItemLayout} hasFeedback label="变更类型">
              {getFieldDecorator('type', {
                rules: [{required: true, message: '变更类型必须选择!'}],
                initialValue: item.type || ''
              })(<Select>
                {optionBuilder(balanceChangeType)}
              </Select>)}
            </FormItem>

            <FormItem {...formItemLayout} hasFeedback label="变更金额">
              {getFieldDecorator('changingAmount', {
                rules: [{required: true, message: '变更金额必须填写!'}],
                initialValue: Math.abs(item.changingAmount) || ''
              })(<Input/>)}
            </FormItem>

            <FormItem {...formItemLayout} hasFeedback label="变更原因">
              {getFieldDecorator('reason', {
                rules: [{required: true, message: '变更原因必须选择!'}],
                initialValue: item.reason || ''
              })(<Select onChange={(e) => {
                dispatch({
                  type: 'balanceChangeApply/changeBalanceChangingReason',
                  payload: {reason: e}
                })
              }}>
                {optionBuilder(balanceChangeReason)}
              </Select>)}
            </FormItem>

          </Col>
          <Col span={12}>
            {contractNumVisible && <FormItem {...formItemLayout} hasFeedback label={voucherHandler()}>
              {getFieldDecorator('reasonKeywords', {
                rules: [{required: true, message: `${voucherHandler()}必须填写!`}],
                initialValue: item.reasonKeywords || ''
              })(<Input/>)}
            </FormItem>}

            <FormItem {...formItemLayout} label="申请附件">
              {getFieldDecorator('attachment', {
                rules: [{required: true, message: '申请附件必须上传!'}],
                initialValue: item.attachment || ''
              })(<LwjUpload {...xlsProps} fileLists={item.attachment || ''}/>)}
            </FormItem>

            <FormItem {...formItemLayout} hasFeedback label="备注">
              {getFieldDecorator('remark', {
                rules: [{required: true, message: '备注必须填写!'}],
                initialValue: item.remark || ''
              })(<Input/>)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

export default Form.create()(FormModal)
